<template>
  <div class="lg_wrap">
    <Header></Header>
    <div class="lg_outer">
      <!-- tab-container -->
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="1">
          <div class="lg_con">
            <mt-field :placeholder="$t('m.tel')" v-model="rTel"  type="tel"></mt-field>
            <mt-field v-model="rCode" :placeholder="$t('m.messageCode')" >
              <span v-if="isCanGetCode" @click="getCode" style="color: #FC6180">{{$t('m.getCode')}}</span>
              <span v-else  style="color: #FC6180">{{codeTime}}S</span>
            </mt-field>
            <mt-field v-model="rPass" :placeholder="$t('m.setPassword')" type="password"></mt-field>
            <mt-field v-model="rePass" :placeholder="$t('m.confirmPassword')" type="password"></mt-field>
          </div>
          <mt-button style="margin-top: 0.6rem" @click="register" type="default" size="large">{{$t('m.done')}}</mt-button>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Header from './comment/header/header.vue'
  import { MessageBox } from 'mint-ui';
  export default {
    name:'findPass',
    data() {
      return {
        /*登陆*/
        phone:'',
        password:'',
        /*注册*/
        rTel:'',
        rCode:'',
        rPass:'',
        rePass:'',
        isCanGetCode:true,
        codeTime:60,
        selected: '1',
        codeInterval:null
      };
    },
    components: {Header},
    watch:{
      agreeValue(val){
        console.log(val.length)
      }
    },
    methods:{
      /*获取验证码*/
      getCode(){
        let that = this;
        let regPhone = /^[1][3,4,5,7,8][0-9]{9}$/;
        if(!this.rTel){
          MessageBox('提示', '请填写手机号');
        }else if(!regPhone.test(this.rTel)){
          MessageBox('提示', '手机号格式错误');
        }else {
          this.$axios({
            method:'GET',
            url: this.$store.state.apiUrl+'login/sendValidCode',
            params:{
              'phone':that.rTel,
            }
          }).then(function (res) {
            if(res.data.status){
              that.changeCodeTime();
              MessageBox('提示', '验证码发送成功 ');
            }else {
              MessageBox('提示', '验证码获取失败'+res.data.data);
            }
            console.log(res)
          }).catch(function () {
            MessageBox('提示', '验证码获取失败');
          })
        }
      },
      /*倒计时*/
      changeCodeTime(){
        let that = this
        this.isCanGetCode = false;
        this.codeInterval = setInterval(function () {
          console.log(111)
          if(that.codeTime>0){
            that.codeTime--;
          }else {
            that.isCanGetCode = true;
            that.codeTime = 60;
            clearInterval(that.codeInterval)
          }
        },1000)
      },
      /*找回*/
      register(){
        let that = this;
        let regPhone = /^[1][3,4,5,7,8][0-9]{9}$/;
        if(!this.rTel){
          MessageBox('提示', '请填写手机号');
        }else if(!regPhone.test(this.rTel)){
          MessageBox('提示', '手机号格式错误');
        }else if(!this.rCode){
          MessageBox('提示', '请先获取验证码');
        }else if(!this.rPass){
          MessageBox('提示', '请设置密码');
        } else if(this.rPass.length<6 || this.rPass.length>12){
          MessageBox('提示', '密码长度需在6-12位之间');
        }else if(this.rePass!==this.rPass){
          MessageBox('提示', '两次填写的密码不相同,请重新输入');
          this.rePass = '';
        }else {
          this.$axios({
            method:'POST',
            url: this.$store.state.apiUrl+'login/forgetPassword',
            params:{
              'phone':that.rTel,
              'valideCode':that.rCode,
              'login_password':that.rPass
            }
          }).then(function (res) {
            if(res.data.status){
              MessageBox('提示', '密码修改成功');
              that.$router.push('/')
            }else {
              MessageBox('提示', res.data.message);
            }
            console.log(res)
          }).catch(function () {
            MessageBox('提示', '密码修改失败，请重试');
          })
        }

      },
    },
    mounted(){
      this.$store.state.detailTitle='忘记密码';
      this.$store.state.showTab = false;
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  border-1px()

  .lg_tab
    height 1.6rem
    background #FFBF44
    position relative
    .mint-navbar
      background none
      position absolute
      left 0
      bottom 0
      width 100%
      .mint-tab-item
        color #fff
        font-size 0.14rem
        position relative
        padding 0
        margin 0
        height 0.44rem
        .mint-tab-item-label
          line-height 0.44rem
      .mint-tab-item.is-selected
        border 0
      .mint-tab-item.is-selected::after
        content ''
        position absolute
        width 0
        height 0
        border-style solid
        border-width 10px
        border-color transparent transparent #fff transparent
        bottom 0
        left 50%
        margin-left -10px
  .lg_outer
    padding-top 0.64rem
  .lg_outer .mint-tab-container
    padding 0.5rem 0.32rem 0.1rem
    .mint-button
      background #FFBF44
      color #fff
    .mint-checklist .mint-cell-wrapper
      padding 0
    .mint-checklist-label
      padding 0
      font-size 0.13rem
      color #ccc
  .lg_con
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.10);
    border-radius 4px
    .mint-cell
      position relative
      &::after
        border-1px()
      &:last-child::after
        content none
    .mint-cell-wrapper
      font-size 0.14rem
  .lg_forget
    text-align right
    margin 0.14rem 0 0.28rem
    font-size 0.13rem
    a
      color #FFBF44
      font-size 0.13rem
</style>
